<template>
  <NavBar floating showBack></NavBar>
  <!-- <Swiper :list="[carInfo.head_image]"></Swiper> -->
  <Swiper :list="carImageList"></Swiper>
  <view class="detail-page">
    <Content :detail="carInfo"></Content>
    <!-- <NearbyDealer :shop="carInfo.shop" :carid="carInfo.id"></NearbyDealer> -->
    <Record :list="carRecordList" title="车辆档案" showkefu></Record>
    <Record :list="vehicleConditionList" title="车况详情"></Record>
    <CarPhoto :info="carInfo"></CarPhoto>
    <!-- <Videos :list="carInfo.videos"></Videos> -->
  </view>
  <!-- <view class="detail-bottom">
    <button class="botton-kefu" open-type="contact">
      <ImgIcon class="kefu" size="64*64" src="static/icons/icon-kefu.png"></ImgIcon>
    </button>
    <view class="btns">
      <view class="btn1 btn" @click="onContactSales(carInfo.shop, carInfo.id)">联系销售</view>
      <view class="btn2 btn" @click="chooseDay = true">立即订购</view>
    </view>
  </view> -->
  <view class="detail-btns">
    <view class="btns">
      <view class="btnl btn detail-btn1-bg" @click="onCreateOrder">
        <ImgIcon class="icon" size="64*64" src="static/icons/detail-btn1.png"></ImgIcon>
        <text>立即订购</text>
      </view>
      <view class="btnr btn" @click="onContactSales(carInfo.id,carIds)">
        <ImgIcon size="64*64" src="static/icons/detail-btn2.png"></ImgIcon>
        <text>预约试驾</text>
      </view>
    </view>
  </view>
  <!-- <ChooseRili v-model:show="chooseDay" title="预约到店时间" @submit="onCreateOrder" v-model:current="params.appointTime">
  </ChooseRili> -->
  <button class="content-icon-flexed" open-type="contact">
    <ImgIcon size="112*112" src="static/icons/icon-kefu.png">
    </ImgIcon>
  </button>
</template>

<script setup>
import {
  onMounted,
  ref
} from "vue"
import NavBar from "@/components/ui/nav-bar"
// import ChooseRili from "@/components/tool/choose-rili"
import ImgIcon from "@/components/ui/img-icon"
import Swiper from "./com/swiper"
import Content from "./com/content"
// import NearbyDealer from "./com/nearby-dealer"
import Record from "./com/record"
import CarPhoto from "./com/car-photo"
import Videos from "./com/videos"
import service from "@/path/service"
import { router } from "@/path/router";
import { getUserLocation } from "@/path/location";
import { onContactSales } from "./data"
const carRecordList = ref([])
const vehicleConditionList = ref([])
// const chooseDay = ref(false)
const carInfo = ref({})
const params = ref({
  carId: null,
  shopId: null,
  appointTime: "",
})
const carImageList = ref([]);
const carIds=ref(0)
onMounted(() => {
  const routerData = router.getData()
  if (!routerData.id) return
  getUserLocation().then((res) => {
    return service.get("api/ycg/car/carinfo", {
      id: routerData?.id,
      lat: res.latitude,
      lng: res.longitude,
    })
  }).then((res) => {
    carInfo.value = res
    const targetKey = "id";
  //获取carInfo.value.shop中的id   
  // 遍历数组中的每个对象
  for (const obj of carInfo.value.shop) {
  // 检查目标键是否存在于对象中
  if (targetKey in obj) {
    // 获取目标键对应的值
    const value = obj[targetKey];
    // 将值赋给变量
    const variable = value;
    // 这里可以进行你想要的操作，例如打印变量
    carIds.value=variable
  }
  }
    params.value = {
      ...params.value,
      carId: res?.id,
      shopId: res.shop[0]?.id,
    }
    carImageList.value = [...(res.images || []), ...(res.inside_images || [])]
    carRecordList.value = [
      { title: "首次上牌", count: res.first_number_time || "-", },
      { title: "表显里程", count: `${res.min_kilometre / 10000}-${res.max_kilometre / 10000}万公里`, },
      { title: "出厂日期", count: res.car_birthday || "-", },
      { title: "过户次数", count: `${res.change_times || "-"}次`, },
      { title: "归属地", count: res.belong_place || "-", },
      { title: "颜色", count: res.car_color || "-", },
    ]
    vehicleConditionList.value = [
      { title: "官方续航", count: `${res.kilometre}km`, },
      // { title: "排放标准", count: res.emission_standard || "-", },
      // { title: "年检到期", count: res.check_end_time || "-", },
      // { title: "能源类型", count: res.check_end_time || "-", },
      // { title: "上市日期", count: "", key: 'market_date' },
      { title: "级别", count: res.car_level || "-", },
      // { title: "变速箱", count: res.gearbox || "-", },
      { title: "电机功率", count: `${res.motor_power}kw`, },
      { title: "电池容量", count: `${res.battery_capacity}kWh`, },
      { title: "电池类型", count: res.battery_type || "-", },
      // { title: "电池品牌", count: "", key: 'battery_brand' },
      { title: "百公里", count: `${res.hundred_km}s`, },
    ]
  }).catch(() => {
    router.back()
  })
})

function onCreateOrder() {
  // if (!carInfo.value.shop || !carInfo.value.shop[0]) {
  //   uni.showToast({
  //     title: "暂无附近的店铺，请更换位置后在试",
  //     icon: "none"
  //   })
  //   return
  // }

  router.navigate({ url: "/pages/mine/order-pay/index" }, {
    data: {
      info: { ...carInfo.value }
    }
  })
  // service.post("api/ycg/usercenter/addorder", params.value).then((res) => {
  //   router.navigate({ url: "/pages/mine/order-pay/index" }, {
  //     data: {
  //       id: res.order_id
  //     }
  //   })
  // })
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>